<template>
	<view class="p20">
		<u-empty v-if="!list.length" />
		<view class="box-shadow p20 bg-fff  mb20 radius20" v-for="(item,index) in list" :key="index"
			@click="$u.route('/pages/index/hospitalDetails/hospitalDetails',{hospital_id:item.id})">
			<view class="flex ">
				<image :src="item.img" class="h152 w200 radius12" mode="aspectFill"></image>
				<view class="flex1 pl24 ov-h">
					<view class="fs28 fw-700 u-line-1">{{item.name}}</view>
					<types :list="item.types" />
					<view class="text-cut-1 color-666 fs24 mt16">{{item.department}}</view>
				</view>
			</view>
			<view class="flex mt26">
				<image src="/static/img/index/address.png" class="h28 w28" mode=""></image>
				<view class="w300 text-cut-1 color-999 flex1 ml12">{{item.address}}</view>
				<!-- <view class="fs22 color-999 ">距离</view> -->
				<view class="color-zs mx10 fs22">{{item.distance}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hospitalList",
		props: {
			list: {
				default: ''
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.cyan {
		background: rgba(0, 190, 195, 0.07);
		border-radius: 8rpx;
		color: #00bec3;
	}

	.yellow {
		background: rgba(234, 135, 68, 0.07);
		border-radius: 8rpx;
		color: #ea8744;
	}

	.blue {
		background: rgba(45, 168, 253, 0.07);
		border-radius: 8rpx;
		color: #2da8fd;
	}
</style>
